<template>
  <div>
    <!-- 超链接,点击之后让hash地址发生变化,不写超链接,手动修改地址栏也行 -->
    <a href="#/home">首页</a>&nbsp;

    <a href="#/movie">电影</a>&nbsp;

    <a href="#/music">音乐</a>&nbsp;

    <a href="#/about">关于</a>
    <hr />
    <component :is="comName"></component>
  </div>
</template>

<script>
import MyAbout from './components/MyAbout.vue'
import MyHome from './components/MyHome.vue'
import MyMovie from './components/MyMovie.vue'
import MyMusic from './components/MyMusic.vue'
export default {
  components: { MyHome, MyAbout, MyMovie, MyMusic },
  data () {
    return {
      comName: 'MyHome'
    }
  },
  //利用created自动换行的特点,当组件创建后,created会自动换行
  created () {
    window.addEventListener('hashchange', () => {
      const hash = location.hash
      if (hash === '#/home') {
        this.comName = 'MyHome'
      }
      if (hash === '#/movie') {
        this.comName = 'MyMovie'
      }
      if (hash === '#/music') {
        this.comName = 'MyMusic'
      }
      if (hash === '#/about') {
        this.comName = 'MyAbout'
      }
    })
  }
}
</script>

<style></style>
